<template>
  <div>
    <!-- 面包屑内容 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体内容	 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row>
        <el-col :span="6">
          <el-input
            placeholder="请输入登录账号"
            v-model="queryInfo.query"
            class="input-with-select"
            clearable
            @clear="getUserList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="deUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="warning" @click="addDialog">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 列表用户内容区域	 -->
      <el-table :data="userList" border style="width: 100%">
        <el-table-column
          prop="uname"
          label="登录账号"
          width="180"
        ></el-table-column>
        <el-table-column prop="user_name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="upwd" label="密码" width="180">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editUserlist(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUser(scope.row.uid)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        align="left"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="arr"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加用户dialog对话框 -->

    <el-dialog
      align="left"
      title="添加用户"
      :visible.sync="addUserVisible"
      width="50%"
      @close="closeAdduserDialog"
    >
      <!--主体部分 -->
      <el-form
        :model="addUserForm"
        status-icon
        :rules="addUserFormRul"
        ref="addUserFormRel"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="登录账号" prop="uname">
          <el-input v-model="addUserForm.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="upwd">
          <el-input
            type="upwd"
            v-model="addUserForm.upwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model.number="addUserForm.phone"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserList">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户diaolog对话框 -->

    <el-dialog
      align="left"
      title="修改用户"
      :visible.sync="editUserVisible"
      width="50%"
    >
      <!--主体部分 -->
      <el-form
        :model="editUserForm"
        status-icon
        ref="editUserFormRel"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名">
          <el-input
            :disabled="true"
            v-model="editUserForm.uname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model.number="editUserForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model.number="editUserForm.phone"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/;
      if (regEmail.test(value)) {
        return cb();
      }
      //返回一个错误提示
      cb(new Error("请输入合法的邮箱"));
    };
    //验证手机号码的规则
    var checkphone = (rule, value, cb) => {
      const regphone = /^1[345789]\d{9}$/;
      if (regphone.test(value)) {
        return cb();
      }
      //返回一个错误提示
      cb(new Error("请输入合法的手机号码"));
    };

    return {
      //搜索的neirong
      searchVal: "",
      //总的数据条数
      total: 0,
      //用户列表参数
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      arr: [2, 5, 15, 20],
      //用户列表
      userList: null,
      // 搜索用户列表
      deuserList: null,
      //添加用户dialog,控制显示隐藏
      addUserVisible: false,
      //添加用户参数
      addUserForm: {
        uname: "",
        upwd: "",
        email: "",
        phone: "",
      },
      //添加用户规则
      addUserFormRul: {
        uname: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        upwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 6,
            message: "长度为6个字符",
            trigger: "blur",
          },
        ],
        email: [{ validator: checkEmail, trigger: "blur" }],
        phone: [{ validator: checkphone, trigger: "blur" }],
      },
      //修改用户参数
      editUserForm: {
        uname: "",
        email: "",
        phone: "",
        upwd: "",
        user_name: "",
        uid: "",
      },
      //修改用户dialog,控制显示隐藏
      editUserVisible: false,
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    //请求用户列表
    //请求用户列表
    getUserList() {
      this.axios
        .get("http://localhost:3000/v1/users/user", { params: this.queryInfo })
        .then(res => {
          // console.log(res);
          if (res.status !== 200) return this.$message.error("获取用户失败！");
          this.$message.success("获取用户成功！");
          this.userList = res.data.results;
        });
      this.getCount();
    },
    //
    deUserList() {
      this.axios
        .get(
          `http://localhost:3000/v1/users/deuser?uname=${this.queryInfo.query}`
        )
        .then(res => {
          console.log(res);
          if (res.status !== 200) return this.$message.error("获取用户失败！");
          this.$message.success("获取用户成功！");
          this.userList = res.data.results;
          this.total = res.data.total;
        });
    },
    //每页数据条数改变时触发
    SizeChange(newval) {
      this.queryInfo.pagesize = newval;
      console.log(newval);
      this.getUserList();
    },
    //当前页面改变时触发
    CurrentChange(newval) {
      this.queryInfo.pagenum = newval;
      console.log(newval);
      this.getUserList();
    },

    //删除用户
    removeUser(uid) {
      this.axios
        .get("http://localhost:3000/v1/users/del", { params: { uid } })
        .then(res => {
          console.log("del", res);
          if (res.status !== 200) return this.$message.error("删除用户失败！");
          this.$message.success("删除用户成功！");
          //刷新列表
          this.getUserList();
        });
    },
    //点击添加新用户
    addDialog() {
      this.addUserVisible = !this.addUserVisible;
    },
    //点击确定发送添加新用户接口
    addUserList() {
      this.$refs.addUserFormRel.validate(valid => {
        //校验规则全部正确向后台发送请求
        if (!valid) return;
        let uname = this.addUserForm.uname;
        let upwd = this.addUserForm.upwd;
        let email = this.addUserForm.email;
        let phone = this.addUserForm.phone;
        this.axios
          .get(
            `http://localhost:3000/v1/users/adduser?uname=${uname}&upwd=${upwd}&email=${email}&phone=${phone}`
          )
          .then(res => {
            console.log("tj", res);
            //console.log(res);
            if (res.status !== 200)
              return this.$message.error("添加用户失败！");
            this.$message.success("添加用户成功！");
            //刷新列表
            this.getUserList();
            this.addUserVisible = !this.addUserVisible;
          });
      });
    },

    //请求条数
    getCount() {
      this.axios.get("http://localhost:3000/v1/users/count").then(res => {
        console.log(res);
        this.total = res.data.results[0].total;
      });
    },

    //关闭添加用户对话框，重置表单
    closeAdduserDialog() {
      this.$refs.addUserFormRel.resetFields();
    },
    //修改用户信息事件
    editUserlist(item) {
      this.editUserVisible = !this.editUserVisible;
      this.editUserForm = {
        uname: item.uname,
        email: item.email,
        phone: item.phone,
        user_name: item.user_name,
        uid: item.uid,
      };
    },
    //点击确定发送请求修改用户信息
    editUser() {
      let email = this.editUserForm.email;
      let phone = this.editUserForm.phone;
      let user_name = this.editUserForm.user_name;
      let uid = this.editUserForm.uid;
      this.axios(
        `http://localhost:3000/v1/users/update?email=${email}&phone=${phone}&user_name=${user_name}&uid=${uid}`
      ).then(res => {
        //console.log(res);
        if (res.status !== 200) return this.$message.error("修改用户失败！");
        this.$message.success("修改用户成功！");
        //刷新列表
        this.getUserList();
        this.editUserVisible = !this.editUserVisible;
      });
    },
  },
};
</script>

<style></style>
